<template>
    <div>
        <div id="navbar" :class="{fixed: isScroll }">
            <div class="navInfo">
<!--                <router-link to="/home" :class="{scroll: isScroll}" class="logo"><img src="@/assets/img/navbar/logo.png" alt=""></router-link>-->
                <router-link to="/home" :class="{scroll: isScroll}" class="logo"><img :src="$store.state.systemMessage.logoUrl" alt=""></router-link>
                <router-link :class="{clicked: $route.params.id == 1000}" to="/goodsclass/1000" class="first-link">婴儿推车</router-link>
                <router-link :class="{clicked: $route.params.id == 2000}" to="/goodsclass/2000">安全座椅</router-link>
                <router-link :class="{clicked: $route.params.id == 3000}" to="/goodsclass/3000">童床/床品</router-link>
                <router-link :class="{clicked: $route.params.id == 4000}" to="/goodsclass/4000">哺喂餐椅</router-link>
                <router-link :class="{clicked: $route.params.id == 5000}" to="/goodsclass/5000">清洁洗护</router-link>
                <router-link :class="{clicked: $route.params.id == 6000}" to="/goodsclass/6000">湿巾/纸尿裤</router-link>
                <router-link :class="{clicked: $route.params.id == 7000}" to="/goodsclass/7000">妈妈用品</router-link>
                <router-link :class="{clicked: $route.params.id == 8000}" to="/goodsclass/8000">童车玩具</router-link>
                <router-link :class="{clicked: $route.params.id == 900}" to="/goodsclass/9000">童装内衣</router-link>
                <el-input
                        placeholder="请输入内容"
                        prefix-icon="el-icon-search"
                        size="small"
                        style="width: 200px; "
                        v-model="keyword"
                        @input="search"
                        clearable
                        @focus="show"
                        @blur="hiden"
                >
                </el-input>
                <div class="search-content" v-show="isShow">
                    <div v-for="(item, index) in searchGoods" :key="index" @click="goTodetail(item)">{{item.name}}</div>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
    import {debounce} from "../../../common/util";
    import {sendwithpost} from "../../../network/profile";

    export default {
        name: "Navbar",
        data() {
            return {
                keyword: '',
                isScroll: false,
                input21: '',
                searchGoods: [],
                isShow: false,
            }
        },
        mounted(){
            window.addEventListener('scroll',this.handleScroll,true)
        },
        methods:{
            handleScroll(){
                let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                if(scrollTop>40){
                    this.isScroll = true
                }else{
                    this.isScroll = false
                }
            },
            search() {
                if (this.keyword == '') {
                    return
                }else {
                    debounce( sendwithpost({
                        url: '/nameToGoods',
                        data: {
                            name: this.keyword
                        }
                    }).then(res=> {
                        this.searchGoods = res.data.goods
                    }))

                }

            },
            goTodetail(goods) {
                this.$router.push({path: '/detail', query: {
                    goodsId: goods._id
                    }})
            },
            show() {
                this.isShow = true
            },
            hiden() {
                this.isShow = false
                this.searchGoods = []
            }
        }
    }
</script>

<style scoped>
    #navbar {
        height: 95px;
        /*position: sticky;*/
        position: fixed;
        width: 100%;
        top: 0;
        background-color: #fff;
        z-index: 7;
        margin-top: 40px;
        box-shadow: 0 3px 3px rgba(100,100,100,.1);
    }
    .navInfo {
        width: 1180px;
        margin: 0 auto;
        height: 80px;
        font-size: 13px;
        line-height: 80px;
        display: flex;
        justify-content: space-around;
        position: relative;
    }
    .search-content {
        width: 220px;
        background-color: white;
        position: absolute;
        right: 1px;
        top: 57px;
    }
    .search-content div{
        width: 190px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        line-height: 3em;
        margin: 1em;
        cursor: pointer;
    }
    .search-content div:hover {
        color: var(--main-color);
    }
    .navInfo a {
        text-decoration: none;
        color: #000;
        width: 90px;
        font-weight: bold;
        font-size: 15px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        margin-top: 25px;
    }
    .navInfo input {
        height: 20px;
        width: 150px;
        margin-top: 30px;
        border-radius: 30px;
        border: none;
    }
    .logo {
        position: absolute;
        top: 0;
        left: 0;
        width: 85px;
        height: 85px;
    }
    .logo img {
        width: 100%;
    }
    #navbar .scroll {
        width: 60px;
        height: 50%;
    }
    .first-link {
        margin-left: 90px;
    }
    .fixed {
        margin-top: 0px !important;
        box-shadow: 0 3px 3px rgba(100,100,100,.1);
    }
    .navInfo .clicked {
        color: rgb(255, 69,3);
    }
</style>